<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .nav{
            width: 500px ;
            height: 40px ;
            font-size: 15px ;
            padding: 10px ;
            margin-top: 50px ;
            
        }
        .one{
            background: #ccc;
        }
        .table{
            text-align: center;
        }
        
    </style>

</head>
<body>
    <!-- css -->
    <div id="app">
    <input type="text" placeholder="请输入图书名称" class="nav" v-model="bookname">
    <button class="btn btn-info" @click="add()">添加</button>
    <hr>
    <table class="table table-bordered">
        <thead>
            <tr class="one">
                <td>id</td>
                <td>书名</td>
                <td>添加时间</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody >
            <tr v-for="(item,index) in movies" class="item">
                <td>{{index+1}}</td>
                <td>{{item.bookname}}</td>
                <td>{{item.time}}</td>
                <td><button class="btn btn-danger" @click="del(index)">删除</button></td>
            </tr>
        </tbody>
    </table>
</div>

    <script>
        
        let vm=new Vue({
            el:"#app",
            //属性 -变量
            data:{
               
                movies: [{
                    id:1,
                    bookname:'三国演义',
                    time:'2021/1/28',

                },
                {
                    id:2,
                    bookname:'红楼梦',
                    time:'2021/1/28',
                    
                },
                {
                    id:3,
                    bookname:'水浒传',
                    time:'2021/1/28',
                    
                },
                {
                    id:4,
                    bookname:'西游记',
                    time:'2021/1/28',
                    
                }]
               
            },
            // 方法-函数
            methods:{
                reset() {
                    this.bookname = ""
                },
                add(){
                    this.movies.push({
                        bookname: this.bookname,
                        time:'2021/1/28',
 
                    })
                    this.reset()
                },
                del(index){
                    this.movies.splice(index,1)
                },
                

            }
        })
    </script>
</body>
</html>